<div class="container-fluid" style="margin: 0px 15px 0px 15px;">
<ol class="breadcrumb">
  <li><a href="<?php echo base_url('/index.php/inicio');?>">Início</a></li>
  <li><a href="<?php echo base_url('index.php/ramais/consulta');?>">Ramal</a></li>
  <li class="active">Novo</li>
</ol>
	<fieldset class="cad">
	<legend>Cadastro Ramais</legend>
		<?php
			$attributes = array('class' => 'form-horizontal', 'role' => 'form', 'id' => 'form');
			
			echo form_open($action,$attributes); 
		
		?>
		<div class="form-group">
		<label for="" class="col-sm-2 control-label">Secretaria</label>
		<div class="col-sm-4">
			<?php 
				
				
				echo form_dropdown('secretaria',$secretaria,@$ramal->secretaria_id,'class="form-control input-sm" id="secretaria"');
			?>
		</div>
		<div class="col-sm-2 control-label" style="text-align:left;color:red;">
		<?php echo form_error('secretaria');?>	
		</div>	
		</div>
		<div class="form-group">
		<label for="" class="col-sm-2 control-label">Setor</label>
		<div class="col-sm-3">
			<?php 
				//echo form_dropdown('setor',$setores,'','class="form-control input-sm" id="setor"');
			?>
			<select name="setor" class="form-control input-sm" id="setor" >
			<option value="<?php echo @$ramal->setor_id;?>"><?php echo @$ramal->nomesetor;?></option>
			</select>
		</div>
		<div class="col-sm-2 control-label" style="text-align:left;color:red;">
		<?php echo form_error('setor');?>	
		</div>	
		</div>
		
		<div class="form-group">
		<label for="" class="col-sm-2 control-label">Ativar Máscara</label>
		<div class="col-sm-1">
			<?php 
				$mascara = array('1'=>'SIM','2'=>'NÃO');
				echo form_dropdown('mascara',$mascara,'1','class="form-control input-sm" id="mascara"');
			?>
		</div>
		<div class="col-sm-2 control-label" style="text-align:left;color:red;">
		<?php echo form_error('setor');?>	
		</div>	
		</div>
		
		
		<div class="form-group">
			<label for="" class="col-sm-2 control-label">Número Ramal</label>
			<div class="col-sm-2">
				<?php 
					$data = array('name'=> 'ramal','id'=> 'ramal','value'=> @$ramal->ramal,'placeholder'=> '(00) 0000-0000','class'=> 'form-control input-sm');
					echo form_input($data);
				?>
			</div>
			<div class="col-sm-2 control-label" style="text-align:left;color:red;">
				<?php echo form_error('ramal');?>	
			</div>	
		</div>
		<div class="form-group">
		<label for="" class="col-sm-2 control-label">Observação</label>
		<div class="col-sm-4">
		  
			<?php 
				$data = array('name'=> 'observacao','id'=> 'observacao','placeholder'=> 'Observação','class'=> 'form-control input-sm','value'=>@$ramal->observacao,'rows'=>'3');
				echo form_textarea($data);
			?>
		</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
			  <div class="checkbox">
				<label>
				  <input type="checkbox" id="flag" name="flag" value="1" ><span style="color:red;">*Ocultar ramal (não mostra na consulta e no relatório.)</span>
				</label>
			  </div>
			</div>
		</div>
		
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
			<?php 
				$data = array('name'=>'salvar','type' => 'submit','class' => 'btn btn-primary','content' =>$botao);
				echo form_button($data);
			?>
			<a id="cancelar" href="<?php echo base_url('index.php/ramais/consulta');?>" class="btn btn-default"></span>Cancelar</a>
			</div>
		</div>
		<?php echo form_close(); ?>
		
	</fieldset>

</div>

	<script src="<?php echo base_url('includes/js/jquery.tokeninput.js')?>"></script>
	<!--<script src="<?php echo base_url('includes/js/bootstrap-tokenfield.js')?>"></script>-->
	
	<link href="<?php echo base_url('includes/css/token-input-facebook.css') ?>" rel="stylesheet"> 
	<!--<link href="<?php echo base_url('includes/css/bootstrap-tokenfield.css') ?>" rel="stylesheet">
	<link href="<?php echo base_url('includes/css/tokenfield-typeahead.css') ?>" rel="stylesheet">-->
	
	<script language="javascript" type="text/javascript">
		$(document).ready(function(){
			$("#ramal").mask('(99) 9999-9999');
			$("#secretaria").focus();
			$("#flag").attr('checked', false);
			$('#form').validate({  
				rules: {  
					ramal: { required: true, remote: '<?php echo base_url('index.php/ramais/valida');?>' },
					setor: { required: true},
					secretaria: { required: true}
				},  
				messages: {  
					ramal: { required: 'Preencha o ramal', remote: ' Ramal já existe!' },
					setor: {required:'Preencha o campo'},
					secretaria: {required:'Preencha o campo'}
				},  
				submitHandler: function( form ){  
					var dados = $(form).serialize();  
					$.ajax({  
						type: "POST",  
						url: "<?php echo base_url('index.php/ramais/salvar');?>",  
						data: dados,  
						success: function( data )  
						{  
							
							//alertify.alert(data);
							alert(data);
							
							$("#secretaria").val('0');
							$("#setor").val('');
							$("#ramal").val('');
							$("#observacao").val('');
							$("#flag").attr('checked', false);
							$("#secretaria").focus();
							
						}  
					});  
	  				return false;  
				}  
			}); 

			$("select#secretaria").change(function(){
                $.getJSON("<?php echo base_url('index.php/setores/selecionaSetor');?>",
				{
					id: $(this).val(), 
					ajax: 'true'
				}, function(j){
						var options = '';
						options += '<option value="">-- SELECIONE O SETOR --</option>';
						for (var i = 0; i < j.length; i++) {
							options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
						}
						$("select#setor").html(options);
					})
			});
			
			$("select#mascara").change(function(){
               	if($(this).val()== 1){
					$("#ramal").mask('(99) 9999-9999');
				}else{
					$("#ramal").mask('9999999999999999');
				}
   
			})
		});
		
			
	</script>
	</body>
</html>